<template>
  <div class="app-container">
    <div class="search-container">
      <van-search 
        v-model="searchKey"
        shape="round"
        @search="handleSearch"
        placeholder="全站搜索" 
        class="search-box"
      />
      <div class="right">
        <van-icon name="add-o" @click="addpet"/>
      </div>
    </div>
    
    <!-- 新闻类型导航 -->
     
    <van-tabs 
      v-model:active="activeTab"
      class="type-tabs"
      swipeable
      @click="goSeek"
    >
      <van-tab title="推荐"></van-tab>
      <van-tab title="广场"></van-tab>
      <van-tab title="转让"></van-tab>
      <van-tab title="情缘"></van-tab>
      <van-tab title="寻宠" @click="goSeek"></van-tab>
    </van-tabs>

    
  </div>
    


   
</template>

<script setup name="PetsHeader">
import { ref ,watch} from 'vue'
import { useRouter } from 'vue-router'
import { emitter } from  '../utils/eventBus'
const router = useRouter()
const activeTab = ref()
const searchKey = ref()
const handleSearch = ()=>{


}
const goSeek = ()=>{
  router.push({name:'seeking'})
}

//监听搜索的关键字
  watch(searchKey,(newValue)=>{
    console.log("searchKey@",searchKey.value);
    emitter.emit('topics-keyword',{
      keyword: newValue
    });
  })

//跳转调价宠物页面
const addpet = ()=>{
  router.push({
    name: 'menu'
  })
}
</script>

<style lang='less' scoped>
.app-container {

    .search-container {
    display: flex; /* 启用Flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
    padding: 10px 16px; /* 适当的内边距 */
    background-color: #fff; /* 背景色可选 */
  
      .search-box {
      flex: 1; /* 搜索框占据剩余空间 */
      margin-right: 12px; /* 与右侧图标间距 */
      border: 2px;

      }

      .right {
        flex-shrink: 0; /* 防止图标被压缩 */
      }
    }



}



</style>